import 'dart:ui';

import 'package:flutter_module/page/welfare_ranking/welfare_ranking_home_state.dart';
import 'package:flutter_module/page/welfare_ranking/welfare_ranking_list_item/welfare_ranking_list_item_view.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import '../../common/base/page/BasePage.dart';
import '../../common/base/page/BasicPage.dart';
import '../../common/widgets/title_bar.dart';
import '../../res/colors.dart';
import '../../res/image.dart';
import 'welfare_ranking_home_logic.dart';

class WelfareRankingHomePage extends BasePage {
  final logic = Get.put(WelfareRankingHomeLogic());

  /// 1 公益时长 2 公益人气
  int countingType;

  /// 1本月  2累计
  int timeType;

  WelfareRankingHomePage({super.key, required this.countingType, required this.timeType}) {
    logic.state.countingType.value = countingType;
    logic.state.timeType.value = timeType;
    if (countingType == 1) {
      logic.state.welfareTab.value = WelfareType.WelfareTime;
      logic.state.textTitle.value = '本月';
    } else {
      logic.state.welfareTab.value = WelfareType.WelfarePopularity;
      logic.state.textTitle.value = '本周';
    }
    if (timeType == 1) {
      logic.state.selectedTab.value = TabType.ThisMonth;
    } else {
      logic.state.selectedTab.value = TabType.Accumulated;
    }
  }

  @override
  State<WelfareRankingHomePage> createState() => _WelfareRankingPageState();
}

class _WelfareRankingPageState
    extends BasicPage<WelfareRankingHomePage, WelfareRankingHomeLogic> {
  WelfareRankingHomeState get _state => currentLogic.state;

  @override
  bool extendBodyBehindAppBar() {
    return true;
  }

  @override
  PreferredSizeWidget? appbar() {
    return TitleBar(
      title: "公益排行榜",
      backgroundColor: Colors.transparent,
      mainColor: Colors.white,
      actions: [
        GestureDetector(
          onTap: () => currentLogic.showWelfareRule(),
          child: Container(
            margin: const EdgeInsets.only(right: 16),
            child: const Align(
              alignment: Alignment.centerRight,
              child: Center(
                child: Text(
                  '规则说明',
                  style: TextStyle(fontSize: 14, color: Colors.white),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ),
          ),
        ),
      ],
      centerTitle: false,
    );
  }

  Widget _topTabView(double marginTop) {
    // 第二个元素（设置负间距）
    return Obx(() {
      return Container(
        margin: EdgeInsets.only(top: marginTop),
        child: DefaultTabController(
          length: _state.welfareRankings.length, // 选项卡的数量
          child: Column(
            children: [
              Container(
                height: 56,
                width: MediaQuery.of(context).size.width,
                margin: const EdgeInsets.fromLTRB(15, 0, 15, 0),
                decoration: BoxDecoration(
                  image: DecorationImage(
                      fit: BoxFit.fill,
                      image: AssetImage(
                          _state.welfareTab.value == WelfareType.WelfareTime
                              ? YouthImages.bgWelfareTimeSelect
                              : YouthImages.bgWelfarePopularSelect)
                      // 替换为你的背景图路径
                      ),
                ),
                child: TabBar(
                  indicator: const BoxDecoration(), // 移除指示器
                  tabs: _state.welfareRankings
                      .map((tab) => Tab(text: tab))
                      .toList(),
                  onTap: (index) {
                    // 在这里添加你的 Tab 切换监听事件的逻辑
                    print(
                        ' logic.state.welfareTab ->>>>${_state.welfareTab.value} index->>>$index');
                    if (index == 0) {
                      _state.welfareTab.value = WelfareType.WelfareTime;
                      // 处理选中公益时长的逻辑
                      _state.countingType.value = 1;
                      _state.textTitle.value = '本月';
                    } else {
                      _state.welfareTab.value = WelfareType.WelfarePopularity;
                      //  处理选中公益人气的逻辑
                      _state.countingType.value = 2;
                      _state.textTitle.value = '本周';
                    }
                  },
                ),
              ),
              Expanded(
                child: SizedBox(
                    width: MediaQuery.of(context).size.width,
                    child: WelfareRankingListItemPage()),
              ),
            ],
          ),
        ),
      );
    });
  }

  Widget _topTab() {
    return Container(
      width: 180,
      height: 28,
      decoration: const BoxDecoration(
        color: Colors.transparent, // 设置透明背景色
      ),
      child: Stack(
        children: [
          Positioned.fill(
            child: SvgPicture.asset(
              YouthImages.bgWelfareHeadTabBg,
              fit: BoxFit.cover,
            ),
          ),
          ClipRRect(
            borderRadius: BorderRadius.circular(14.0),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4), // 调整 sigmaX 和 sigmaY 的值以控制模糊程度,
              child: Container(
                color: Colors.transparent, // 设置透明背景色
                child: Obx(() {
                  return Row(
                    children: [
                      /// 到时候删掉这块
                      Expanded(
                        child: GestureDetector(
                          behavior: HitTestBehavior.opaque,
                          onTap: () {
                            // 处理选中本月的逻辑
                            _state.timeType.value = 1;
                            _state.selectedTab.value = TabType.ThisMonth;
                            print(
                                ' logic.state.selectedTab ->>>>${_state.selectedTab}');
                          },
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Padding(
                              padding: const EdgeInsets.only(left: 42),
                              child: Text(
                                _state.textTitle.value,
                                style: TextStyle(
                                  fontWeight: FontWeight.w500,
                                  color: _state.selectedTab.value == TabType.ThisMonth
                                      ? Colors.white
                                      : YouthColors.color_AEE094,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                      Expanded(
                        child: GestureDetector(
                          behavior: HitTestBehavior.opaque,
                          onTap: () {
                            // 处理选中累计的逻辑
                            _state.timeType.value = 2;
                            _state.selectedTab.value = TabType.Accumulated;
                            print(
                                ' logic.state.Accumulated.selectedTab ->>>>${_state.selectedTab}');
                          },

                          /// 到时候删掉这块
                          child: Align(
                            alignment:Alignment.centerRight,
                            child: Padding(
                              padding: const EdgeInsets.only(right: 42),
                              child: Text(
                                '累计',
                                style: TextStyle(
                                  color:
                                      _state.selectedTab.value == TabType.Accumulated
                                          ? Colors.white
                                          : YouthColors.color_AEE094,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  );
                }),
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget _headBg(String headImg, double topHeight) {
    return Image(
      image: AssetImage(headImg),
      height: topHeight,
    );
  }

  @override
  Widget body(BuildContext context) {
    // 头部背景高度
    double topHeight = 248 * (MediaQuery.of(context).size.width / 375);
    //本月和累计 maringTop
    double tabMargingTop = 193 * (MediaQuery.of(context).size.width / 375);
    //时长 人气
    double tab2MargingTop =
        topHeight - 15 * (MediaQuery.of(context).size.width / 375);
    return Stack(children: [
      Column(
        children: [
          _headBg(YouthImages.bgWelfareHomeHead, topHeight),
          Expanded(
              child: Container(
            color: YouthColors.color_F8FCF5,
          )),
        ],
      ),
      Align(
          alignment: Alignment.topCenter,
          child: Container(
              margin: EdgeInsets.only(top: tabMargingTop),
              child: SizedBox(height: 28, child: _topTab()))),
      _topTabView(tab2MargingTop),
    ]);
  }

  @override
  WelfareRankingHomeLogic get currentLogic => widget.logic;

  @override
  String screenName() {
    return '';
  }
}
